import Icon from '@/components/common/icon'
import Image from '@/components/common/image'
import Link from '@/components/common/link';
import { Card } from '@/components/layout/card-list';
import { getCategoryUrl } from '@/utils/build-url/news';
import { AiOutlineRight } from "react-icons/ai";

interface ICategory {
  coverUrl: string
  name: string
  id: number
  slug: string
  description: string
  type: 'video' | 'article'
}
export interface INewsCategoryCardProps extends ICategory {
  fatherCategory?: ICategory
}
interface Props {
  obj: INewsCategoryCardProps
}

const NewsCategoryCard = ({obj: {id, name, slug, coverUrl, description, fatherCategory, type}}: Props) => {
  return (
    <Card>
      <Link href={getCategoryUrl({language: 'zh', category: slug, fatherCategory: fatherCategory?.slug, type})} className='flex items-center gap-content-gap-x md:gap-content-gap-x-md px-card-p-x md:px-card-p-x-md py-card-p-y md:py-card-p-y-md'>
        <Image className='rounded-card-rounded md:rounded-card-rounded-md shrink-0 w-[80px]! h-[80px] aspect-square! object-cover' src={coverUrl} alt={name} />
        <div className='space-y-txt-gap-y md:space-y-txt-gap-y-md'>
          <strong className='h3 block line-clamp-1'>{name}</strong>
          <p className='line-clamp-2'>{description}</p>
        </div>
        <div>
          <Icon icon={AiOutlineRight} />
        </div>
      </Link>
    </Card>
  )
}

export default NewsCategoryCard